<template>
  <div class="app-container">
    <el-divider>
      <span style="font-size: 26px;">文书校验平台</span>
    </el-divider>
    <div>
      <el-row type="flex" justify="space-around" class="pdf-card">
        <el-col :span="4">
          <div
            style="display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;">
            <div style="font-size: 20px; margin-bottom: 20px; font-weight: 500;">起诉书</div>
            <el-upload drag class="upload-demo" action="http://localhost:8060/api/upload" :on-success="handleSuccess"
              :limit="1">
              <i class="el-icon-upload" style="font-size: 26px; color: #409EFF; margin-bottom: 8px;"></i>
              <div class="el-upload__text" style="font-size: 14px; color: #606266;">文件拖到此处，或<em
                  style="color: #409EFF;">点击上传</em></div>
            </el-upload>
          </div>
        </el-col>
        <el-col :span="4">
          <div
            style="display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;">
            <div style="font-size: 20px; margin-bottom: 20px; font-weight: 500;">立案通知书</div>
            <el-upload drag class="upload-demo" action="http://localhost:8060/api/upload" :on-success="handleSuccess"
              :limit="1">
              <i class="el-icon-upload" style="font-size: 26px; color: #409EFF; margin-bottom: 8px;"></i>
              <div class="el-upload__text" style="font-size: 14px; color: #606266;">文件拖到此处，或<em
                  style="color: #409EFF;">点击上传</em></div>
            </el-upload>
          </div>
        </el-col>
        <el-col :span="4">
          <div
            style="display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;">
            <div style="font-size: 20px; margin-bottom: 20px; font-weight: 500;">一审判决书</div>
            <el-upload drag class="upload-demo" action="http://localhost:8060/api/upload" :on-success="handleSuccess"
              :limit="1">
              <i class="el-icon-upload" style="font-size: 26px; color: #409EFF; margin-bottom: 8px;"></i>
              <div class="el-upload__text" style="font-size: 14px; color: #606266;">文件拖到此处，或<em
                  style="color: #409EFF;">点击上传</em></div>
            </el-upload>
          </div>
        </el-col>
        <el-col :span="4">
          <div
            style="display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;">
            <div style="font-size: 20px; margin-bottom: 20px; font-weight: 500;">上诉状</div>
            <el-upload drag class="upload-demo" action="http://localhost:8060/api/upload" :on-success="handleSuccess"
              :limit="1">
              <i class="el-icon-upload" style="font-size: 26px; color: #409EFF; margin-bottom: 8px;"></i>
              <div class="el-upload__text" style="font-size: 14px; color: #606266;">文件拖到此处，或<em
                  style="color: #409EFF;">点击上传</em></div>
            </el-upload>
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;" type="flex" justify="space-around" class="pdf-card">
        <el-col :span="4">
          <div
            style="display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;">
            <div style="font-size: 20px; margin-bottom: 20px; font-weight: 500;">二审判决书</div>
            <el-upload drag class="upload-demo" action="http://localhost:8060/api/upload" :on-success="handleSuccess"
              :limit="1">
              <i class="el-icon-upload" style="font-size: 26px; color: #409EFF; margin-bottom: 8px;"></i>
              <div class="el-upload__text" style="font-size: 14px; color: #606266;">文件拖到此处，或<em
                  style="color: #409EFF;">点击上传</em></div>
            </el-upload>
          </div>
        </el-col>
        <el-col :span="4">
          <div
            style="display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;">
            <div style="font-size: 20px; margin-bottom: 20px; font-weight: 500;">执行通知书</div>
            <el-upload drag class="upload-demo" action="http://localhost:8060/api/upload" :on-success="handleSuccess"
              :limit="1">
              <i class="el-icon-upload" style="font-size: 26px; color: #409EFF; margin-bottom: 8px;"></i>
              <div class="el-upload__text" style="font-size: 14px; color: #606266;">文件拖到此处，或<em
                  style="color: #409EFF;">点击上传</em></div>
            </el-upload>
          </div>
        </el-col>
        <el-col :span="4">
          <div
            style="display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;">
            <div style="font-size: 20px; margin-bottom: 20px; font-weight: 500;">执行裁定书</div>
            <el-upload drag class="upload-demo" action="http://localhost:8060/api/upload" :on-success="handleSuccess"
              :limit="1">
              <i class="el-icon-upload" style="font-size: 26px; color: #409EFF; margin-bottom: 8px;"></i>
              <div class="el-upload__text" style="font-size: 14px; color: #606266;">文件拖到此处，或<em
                  style="color: #409EFF;">点击上传</em></div>
            </el-upload>
          </div>
        </el-col>
        <el-col :span="4">
          <div
            style="display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;">
            <div style="font-size: 20px; margin-bottom: 20px; font-weight: 500;">结案通知书</div>
            <el-upload drag class="upload-demo" action="http://localhost:8060/api/upload" :on-success="handleSuccess"
              :limit="1">
              <i class="el-icon-upload" style="font-size: 26px; color: #409EFF; margin-bottom: 8px;"></i>
              <div class="el-upload__text" style="font-size: 14px; color: #606266;">文件拖到此处，或<em
                  style="color: #409EFF;">点击上传</em></div>
            </el-upload>
          </div>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-divider>
        <el-button size="mini" type="primary" style="width: 120px;text-align: center;font-size: 16px;"
          @click="handleCheck">检测
        </el-button>
      </el-divider>
    </div>
    <div style="white-space: pre-wrap;text-align: center;"  v-loading="loading" element-loading-text="正在生成中..." >
      {{aiContent}}
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
export default {
  data() {
    return {
      uploadedFiles: [],
      loading: false,
      aiContent:''

    }
  },
  mounted() {
  },
  methods: {
    handleCheck(){
      this.loading = true
      api.checkApi().then(res=>{
        this.loading = false
        this.aiContent = res.data
      })
    },
    handleSuccess(response, file, fileList) {
      console.log('上传成功', response);
    },
    alertSuccess(msg) {
      this.$message({
        message: msg,
        type: 'success'
      });
    },
    alertError(msg) {
      this.$message({
        message: msg,
        type: 'error'
      });
    },

  }
}
</script>

<style scoped>
.el-upload-dragge {
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  box-sizing: border-box;
  width: 100%;
  height: 180px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}


.pdf-card .el-card {
  width: 230px;
  height: 200px;
}


.first-div {
  width: 500px;
  padding: 20px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}



* {
  margin: 0;
  padding: 0;
}


</style>
